<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>音乐管理系统首页</title>

    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        #userInfoDialog {
            padding: 20px;
            width: 400px;
            display: none; /*隐藏层*/
        }

        #userInfoDialog p {
            padding: 10px 0;
        }

        #pageBox {
            overflow: hidden;
        }

        .count {
            display: flex;
            flex-direction: row;
            background: #fff;
            height: 80px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .count:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }

        .count > div {
            flex: 1;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .title {
            font-size: 16px;
            color: #fff;
            font-weight: 600;
            text-align: center;
            padding: 0 20px;
        }

        .data {
            font-size: 24px;
            font-weight: 700;
            color: #333;
        }
        
        /* 音乐播放器样式 - 网易云风格 */
        .music-player {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-top: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
            padding: 0 20px;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 9999;
        }
        
        .player-left {
            display: flex;
            align-items: center;
            width: 25%;
        }
        
        .player-cover {
            width: 42px;
            height: 42px;
            margin-right: 12px;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }
        
        .player-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .player-info {
            flex: 1;
            overflow: hidden;
        }
        
        .player-title {
            font-size: 14px;
            color: #333;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 4px;
        }
        
        .player-artist {
            font-size: 12px;
            color: #999;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .player-center {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .player-controls {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .player-btn {
            margin: 0 8px;
            cursor: pointer;
            color: #333;
            font-size: 18px;
            transition: all 0.2s;
        }
        
        .player-btn:hover {
            color: #c20c0c;
        }
        
        .player-btn-play {
            font-size: 28px;
        }
        
        .player-progress {
            display: flex;
            align-items: center;
            width: 100%;
            max-width: 500px;
        }
        
        .progress-time {
            font-size: 11px;
            color: #999;
            margin: 0 10px;
        }
        
        .progress-bar {
            flex: 1;
            height: 4px;
            background: #ddd;
            border-radius: 2px;
            position: relative;
            cursor: pointer;
        }
        
        .progress-bar:hover .progress-inner {
            height: 6px;
            top: -1px;
        }
        
        .progress-inner {
            position: absolute;
            left: 0;
            top: 0;
            height: 4px;
            background: #c20c0c;
            border-radius: 2px;
            transition: all 0.2s;
        }
        
        .progress-handle {
            position: absolute;
            top: 50%;
            right: -4px;
            transform: translate(50%, -50%);
            width: 12px;
            height: 12px;
            background: #fff;
            border: 2px solid #c20c0c;
            border-radius: 50%;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        .progress-bar:hover .progress-handle {
            opacity: 1;
        }
        
        .player-right {
            width: 25%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
        
        .player-right .player-btn {
            font-size: 16px;
            margin: 0 12px;
        }
        
        .volume-control {
            display: flex;
            align-items: center;
            width: 100px;
        }
        
        .volume-bar {
            flex: 1;
            height: 4px;
            background: #ddd;
            border-radius: 2px;
            margin-left: 8px;
            position: relative;
            cursor: pointer;
        }
        
        .volume-bar:hover .volume-inner {
            height: 6px;
            top: -1px;
        }
        
        .volume-inner {
            position: absolute;
            left: 0;
            top: 0;
            height: 4px;
            background: #999;
            border-radius: 2px;
            transition: all 0.2s;
        }
        
        /* 适配页面底部空间 */
        #pageBox {
            margin-bottom: 70px;
        }
    </style>

</head>
<body>

<div style="padding: 15px;" id="pageBox">
    <div class="count-box">
        <div class="layui-row layui-col-space16">
            <div class="layui-col-md3">
                <div class="count">
                    <div class="title layui-bg-green">
                        <i class="layui-icon layui-icon-music"></i> 歌曲
                    </div>
                    <div class="data" id="musicCount">0</div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="count">
                    <div class="title layui-bg-blue">
                        <i class="layui-icon layui-icon-carousel"></i> 专辑
                    </div>
                    <div class="data" id="albumCount">0</div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="count">
                    <div class="title layui-bg-red">
                        <i class="layui-icon layui-icon-form"></i> 歌单
                    </div>
                    <div class="data" id="musiclistCount">0</div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="count">
                    <div class="title layui-bg-cyan">
                        <i class="layui-icon layui-icon-group"></i> 用户
                    </div>
                    <div class="data" id="userCount">0</div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-bg-gray" style="padding: 16px; margin-top: 16px;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <i class="layui-icon layui-icon-music"></i>
                        热搜歌曲TOP10
                    </div>
                    <div class="layui-card-body">
                        <div id="hotMusic" style="width: 100%;height: 280px"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <i class="layui-icon layui-icon-chart-screen"></i>
                        热搜专辑TOP10
                    </div>
                    <div class="layui-card-body">
                        <div id="hotAblum" style="width: 100%;height: 280px"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <i class="layui-icon layui-icon-list"></i>
                        热搜歌单TOP10
                    </div>
                    <div class="layui-card-body">
                        <div id="hotMusiclist" style="width: 100%;height: 280px"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <i class="layui-icon layui-icon-chart"></i>
                        新增用户趋势
                    </div>
                    <div class="layui-card-body">
                        <div id="userTrend" style="width: 100%;height: 280px"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 音乐播放器 -->
<div class="music-player">
    <div class="player-left">
        <div class="player-cover">
            <img id="player-cover" src="../res/images/logo.png" alt="歌曲封面">
        </div>
        <div class="player-info">
            <div class="player-title" id="player-title">请选择歌曲播放</div>
            <div class="player-artist" id="player-artist">--</div>
        </div>
    </div>
    
    <div class="player-center">
        <div class="player-controls">
            <i class="layui-icon layui-icon-prev player-btn"></i>
            <i class="layui-icon layui-icon-play player-btn player-btn-play" id="player-play"></i>
            <i class="layui-icon layui-icon-next player-btn"></i>
        </div>
        <div class="player-progress">
            <span class="progress-time" id="current-time">00:00</span>
            <div class="progress-bar">
                <div class="progress-inner"></div>
                <div class="progress-handle"></div>
            </div>
            <span class="progress-time" id="total-time">00:00</span>
        </div>
    </div>
    
    <div class="player-right">
        <i class="layui-icon layui-icon-random player-btn"></i>
        <i class="layui-icon layui-icon-refresh player-btn"></i>
        <div class="volume-control">
            <i class="layui-icon layui-icon-speaker player-btn"></i>
            <div class="volume-bar">
                <div class="volume-inner" style="width: 70%;"></div>
            </div>
        </div>
    </div>
</div>

<audio id="audio-player" src="" style="display: none;"></audio>

<script src="../res/layui/layui.js"></script>
<script src="../res/echarts/echarts.js"></script>
<script>
    //JS
    layui.config({
        base: '/echarts/'
    }).use(function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$
            , echarts = layui.echarts;
        
        // 获取统计数据
        function getStatistics() {
            $.ajax({
                url: '/statistics',
                type: 'GET',
                success: function(R) {
                    if (R && R.code === 200 && R.data) {
                        $('#musicCount').text(R.data.musicCount || 0);
                        $('#albumCount').text(R.data.albumCount || 0);
                        $('#musiclistCount').text(R.data.musiclistCount || 0);
                        $('#userCount').text(R.data.userCount || 0);
                    } else {
                        // 如果接口不可用，使用模拟数据
                        $('#musicCount').text(Math.floor(Math.random() * 500) + 100);
                        $('#albumCount').text(Math.floor(Math.random() * 100) + 50);
                        $('#musiclistCount').text(Math.floor(Math.random() * 200) + 80);
                        $('#userCount').text(Math.floor(Math.random() * 1000) + 200);
                    }
                },
                error: function() {
                    // 加载失败时使用模拟数据
                    $('#musicCount').text(Math.floor(Math.random() * 500) + 100);
                    $('#albumCount').text(Math.floor(Math.random() * 100) + 50);
                    $('#musiclistCount').text(Math.floor(Math.random() * 200) + 80);
                    $('#userCount').text(Math.floor(Math.random() * 1000) + 200);
                }
            });
        }
        
        // 初始化图表
        function initCharts() {
            // 热搜歌曲图表
            initHotMusicChart();
            // 热搜专辑图表
            initHotAlbumChart();
            // 热搜歌单图表
            initHotMusiclistChart();
            // 用户趋势图表
            initUserTrendChart();
        }
        
        // 初始化热搜歌曲图表
        function initHotMusicChart() {
            var chart = echarts.init(document.getElementById('hotMusic'));
            // 请求数据
            $.ajax({
                url: '/music/hotList',
                type: 'GET',
                success: function(R) {
                    if (R && R.code === 200 && R.data) {
                        renderHotMusicChart(chart, R.data);
                    } else {
                        // 使用模拟数据
                        renderHotMusicChart(chart, getMockMusicData());
                    }
                },
                error: function() {
                    // 加载失败时使用模拟数据
                    renderHotMusicChart(chart, getMockMusicData());
                }
            });
        }
        
        // 渲染热搜歌曲图表
        function renderHotMusicChart(chart, data) {
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: data.map(item => item.name).reverse()
                },
                series: [{
                    name: '播放次数',
                    type: 'bar',
                    data: data.map(item => item.playCount).reverse(),
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            { offset: 0, color: '#83bff6' },
                            { offset: 0.5, color: '#188df0' },
                            { offset: 1, color: '#188df0' }
                        ])
                    }
                }]
            };
            chart.setOption(option);
        }
        
        // 初始化热搜专辑图表
        function initHotAlbumChart() {
            var chart = echarts.init(document.getElementById('hotAblum'));
            // 请求数据
            $.ajax({
                url: '/album/hotList',
                type: 'GET',
                success: function(R) {
                    if (R && R.code === 200 && R.data) {
                        renderHotAlbumChart(chart, R.data);
                    } else {
                        // 使用模拟数据
                        renderHotAlbumChart(chart, getMockAlbumData());
                    }
                },
                error: function() {
                    renderHotAlbumChart(chart, getMockAlbumData());
                }
            });
        }
        
        // 渲染热搜专辑图表
        function renderHotAlbumChart(chart, data) {
            var option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'horizontal',
                    bottom: 10
                },
                series: [{
                    name: '专辑播放量',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: data.slice(0, 8).map((item, index) => ({
                        name: item.name,
                        value: item.playCount
                    }))
                }]
            };
            chart.setOption(option);
        }
        
        // 初始化热搜歌单图表
        function initHotMusiclistChart() {
            var chart = echarts.init(document.getElementById('hotMusiclist'));
            // 请求数据
            $.ajax({
                url: '/musiclist/hotList',
                type: 'GET',
                success: function(R) {
                    if (R && R.code === 200 && R.data) {
                        renderHotMusiclistChart(chart, R.data);
                    } else {
                        renderHotMusiclistChart(chart, getMockMusiclistData());
                    }
                },
                error: function() {
                    renderHotMusiclistChart(chart, getMockMusiclistData());
                }
            });
        }
        
        // 渲染热搜歌单图表
        function renderHotMusiclistChart(chart, data) {
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: data.map(item => item.name),
                    axisLabel: {
                        interval: 0,
                        rotate: 45
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '收藏数',
                    type: 'line',
                    smooth: true,
                    data: data.map(item => item.collectCount),
                    itemStyle: {
                        color: '#c20c0c'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(194, 12, 12, 0.3)' },
                            { offset: 1, color: 'rgba(194, 12, 12, 0.1)' }
                        ])
                    }
                }]
            };
            chart.setOption(option);
        }
        
        // 初始化用户趋势图表
        function initUserTrendChart() {
            var chart = echarts.init(document.getElementById('userTrend'));
            // 请求数据
            $.ajax({
                url: '/user/trend',
                type: 'GET',
                success: function(R) {
                    if (R && R.code === 200 && R.data) {
                        renderUserTrendChart(chart, R.data);
                    } else {
                        renderUserTrendChart(chart, getMockUserTrendData());
                    }
                },
                error: function() {
                    renderUserTrendChart(chart, getMockUserTrendData());
                }
            });
        }
        
        // 渲染用户趋势图表
        function renderUserTrendChart(chart, data) {
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data.dates
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '新增用户',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: data.counts,
                    itemStyle: {
                        color: '#13c2c2'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(19, 194, 194, 0.3)' },
                            { offset: 1, color: 'rgba(19, 194, 194, 0.1)' }
                        ])
                    }
                }]
            };
            chart.setOption(option);
        }
        
        // 模拟数据函数
        function getMockMusicData() {
            return [
                { name: '起风了', playCount: 15234 },
                { name: '往后余生', playCount: 13456 },
                { name: '光年之外', playCount: 12890 },
                { name: '你的答案', playCount: 11234 },
                { name: '海阔天空', playCount: 10567 },
                { name: '夜空中最亮的星', playCount: 9876 },
                { name: '孤勇者', playCount: 8934 },
                { name: '万疆', playCount: 7890 },
                { name: '漠河舞厅', playCount: 6789 },
                { name: '这世界那么多人', playCount: 5678 }
            ];
        }
        
        function getMockAlbumData() {
            return [
                { name: '最伟大的作品', playCount: 56789 },
                { name: '呼吸之野', playCount: 45678 },
                { name: '无人之岛', playCount: 34567 },
                { name: '飞行模式', playCount: 23456 },
                { name: '像风一样', playCount: 19876 },
                { name: '余烬', playCount: 16789 },
                { name: '小幸运', playCount: 14567 },
                { name: '追光者', playCount: 12345 }
            ];
        }
        
        function getMockMusiclistData() {
            return [
                { name: '华语流行', collectCount: 1234 },
                { name: '经典老歌', collectCount: 1098 },
                { name: '欧美金曲', collectCount: 987 },
                { name: '电音舞曲', collectCount: 876 },
                { name: '轻音乐', collectCount: 765 },
                { name: '摇滚', collectCount: 654 },
                { name: '民谣', collectCount: 543 },
                { name: '嘻哈说唱', collectCount: 432 },
                { name: '古风音乐', collectCount: 321 },
                { name: '爵士蓝调', collectCount: 210 }
            ];
        }
        
        function getMockUserTrendData() {
            var dates = [];
            var counts = [];
            var today = new Date();
            
            for (var i = 29; i >= 0; i--) {
                var date = new Date(today);
                date.setDate(date.getDate() - i);
                dates.push((date.getMonth() + 1) + '/' + date.getDate());
                counts.push(Math.floor(Math.random() * 50) + 10);
            }
            
            return { dates: dates, counts: counts };
        }
        
        // 初始化音乐播放器
        function initMusicPlayer() {
            var audio = document.getElementById('audio-player');
            var playBtn = document.getElementById('player-play');
            var progressBar = document.querySelector('.progress-bar');
            var progressInner = document.querySelector('.progress-inner');
            var currentTimeEl = document.getElementById('current-time');
            var totalTimeEl = document.getElementById('total-time');
            
            // 播放/暂停切换
            playBtn.addEventListener('click', function() {
                if (audio.paused) {
                    audio.play();
                    playBtn.classList.remove('layui-icon-play');
                    playBtn.classList.add('layui-icon-pause');
                } else {
                    audio.pause();
                    playBtn.classList.remove('layui-icon-pause');
                    playBtn.classList.add('layui-icon-play');
                }
            });
            
            // 进度条更新
            audio.addEventListener('timeupdate', function() {
                var percent = (audio.currentTime / audio.duration) * 100;
                progressInner.style.width = percent + '%';
                currentTimeEl.textContent = formatTime(audio.currentTime);
            });
            
            // 音频加载完成
            audio.addEventListener('loadedmetadata', function() {
                totalTimeEl.textContent = formatTime(audio.duration);
            });
            
            // 播放结束
            audio.addEventListener('ended', function() {
                playBtn.classList.remove('layui-icon-pause');
                playBtn.classList.add('layui-icon-play');
                progressInner.style.width = '0%';
                currentTimeEl.textContent = '00:00';
            });
            
            // 点击进度条跳转
            progressBar.addEventListener('click', function(e) {
                var percent = (e.offsetX / this.offsetWidth);
                audio.currentTime = percent * audio.duration;
                progressInner.style.width = percent * 100 + '%';
            });
            
            // 格式化时间
            function formatTime(seconds) {
                var minutes = Math.floor(seconds / 60);
                seconds = Math.floor(seconds % 60);
                return (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);
            }
        }
        
        // 页面加载完成后初始化
        $(function() {
            // 获取统计数据
            getStatistics();
            // 初始化图表
            initCharts();
            // 初始化音乐播放器
            initMusicPlayer();
            
            // 监听窗口大小变化，重新渲染图表
            window.addEventListener('resize', function() {
                echarts.getInstanceByDom(document.getElementById('hotMusic')).resize();
                echarts.getInstanceByDom(document.getElementById('hotAblum')).resize();
                echarts.getInstanceByDom(document.getElementById('hotMusiclist')).resize();
                echarts.getInstanceByDom(document.getElementById('userTrend')).resize();
            });
        });
    });
</script>
</body>
</html>